<template>
  <div>
    <a-modal :title="title" class="overFlow_dialog" :visible="show" @ok="onSubmit" @cancel="cancel"
      :confirmLoading="confirmLoading" :width="400" centered>
      <template slot="okText">
        {{ step === 1 ? '导入' : '重新导入匹配车入库车辆牌' }}
      </template>
      <div style="padding:0 20px;  height:314px;width:100%;overflow-y:auto;overflow-x:hidden;">

        <div v-if="step === 1">
          <div class="titleImport">1. 下载模板</div>
          <div class="titleI">请下载导入模板，按照提示信息完善表格内容</div>
          <a-button style="margin-top:12px;" type="primary" icon="download" @click="onTemplate" ghost>下载模板</a-button>
          <div style="margin-top:32px;" class="titleImport">2. 上传完善后的模板</div>
          <div v-if="fileList.length === 0">
            <a-upload-dragger name="file" :file-list="files" :multiple="true"
              :action="`${BASE_URL}/member/admin/import/memberInfosFilterExcel`" :before-upload="beforeUpload">
              <p class="ant-upload-drag-icon">
                <a-icon style="color:#C0C4CC;" type="cloud-upload" />
              </p>
              <p class="ant-upload-text contentss">
                将文件拖到此处，或
                <span style="color:#5284FE;">点击上传</span>
              </p>
            </a-upload-dragger>
          </div>
          <div v-else class="xu_border" style="margin-top:12px;">
            <img src="../../assets/img/icon_excel.png" alt />
            <div class="name">{{ this.fileList[0].name }}</div>
            <a-upload :before-upload="beforeUpload" :file-list="files" action="/">
              <a-button>重新选择</a-button>
            </a-upload>
          </div>
        </div>
        <div v-if="step === 2">
          <div style="width:100%;background: #f5f5f5;border-radius: 4px;height:36px; padding:8px 12px">
            <div class="flex_start">
              <img src="../../assets/img/icon_warning.png" style="width:18px;" alt="">
              <div
                style="font-size: 14px;font-weight: 400;text-align: left;color: #333333;line-height: 20px;margin-left:8px;">
                部分导入失败</div>
            </div>
          </div>
          <div
            style=" font-size: 14px;font-weight: 400;text-align: left;color: #333333;line-height: 20px;margin-top:16px">
            {{ message }}
          </div>
        </div>
      </div>
    </a-modal>
    <!-- 1.7.3.9 导入设备库 异常弹窗 -->
    <a-modal class="device-store-dialog" :visible="deviceStoreShow" :closable="false" :width="400" centered
      :footer="null">
      <div style="text-align: center;"><a-icon type="exclamation-circle" theme="filled"
          style="color: #F5A022;font-size: 52px;" /></div>
      <div class="t1">{{ deviceStoreErrText }}</div>
      <div class="t2">具体导入信息请至导入离线数据中查看</div>
      <div style="text-align: center;margin-top:24px;">
        <a-button @click="deviceStoreShow = false">关 闭</a-button>
        <a-button @click="toOfflineData" style="margin-left:20px;" type="primary">离线数据</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { companiesTemplate, importVinNo, companiesImportant, batchMatchingImportant, putInStorageTemplate, batchMatchingLicensePlateTemplate } from '@/services/rider'
import { carTemplate, carImportant, putInStorageImportant, downloadTemplate, lotCardImportant, getExcelTemplate, importHardWareDevice } from '@/services/car'
import { storeTemplate, storeImportant } from '@/services/store'
import { deviceExcel, importDevice, getVinNoExcelTemplate, getDeviceExcelTemplate, importDeviceStore, getOffline } from '@/services/deviceManament'
import { getTemplateDownload, putInAccessoriesPurchaseImportant } from '@/services/repair'

import { downLoads } from '@/utils/util.js'
import { off } from 'process'
const BASE_URL = process.env.VUE_APP_API_URL
export default {
  props: ['title'],
  data () {
    return {
      step: 1,
      BASE_URL,
      confirmLoading: false,
      show: false,
      fileList: [],
      message: '',
      files: [],
      deviceStoreShow: false,
      deviceStoreErrText: '部分文件导入失败'
    }
  },
  methods: {
    onTemplate () {
      if (this.status === 1) {
        this.riderTemplate()
      } else if (this.status === 2) {
        this.carTemplate()
      } else if (this.status === 3) {
        this.storeTemplate()
      } else if (this.status === 4) {
        this.putInStorageTemplate()// 入库车辆下载模板
      } else if (this.status === 5) {
        this.batchMatchingLicensePlateTemplate()// 批量匹配车牌下载模板
      } else if (this.status === 6) {
        this.getDeviceExcel()
      } else if (this.status === 7) { // 导入车架号
        this.getDeviceExcelVehicles()
      } else if (this.status === 8) { // 配件采购单
        this._getTemplateDownload()
      } else if (this.status === 9) { // 物联网卡
        this.getLotCardTemp()
      } else if (this.status === 10) { // 硬件设备
        this.getHardwareDeviceTemp()
      } else if (this.status === 11) {
        this.getDeviceStoreExcelTemplate()
      }
    },
    // 1.7.0
    // 设备库模板
    async getDeviceStoreExcelTemplate () {
      const res = await getDeviceExcelTemplate()
      downLoads('设备库模板.xlsx', res)
    },
    // 1.6.7
    // 硬件设备模板
    async getHardwareDeviceTemp () {
      const res = await getExcelTemplate()
      downLoads('硬件设备模板.xlsx', res)
    },
    // 1.6.4
    // 物联网卡模板
    async getLotCardTemp () {
      const res = await downloadTemplate()
      downLoads('物联网卡模板.xlsx', res)
    },

    // 设备模板
    async getDeviceExcelVehicles () {
      const res = await getVinNoExcelTemplate()
      downLoads('导入车架号.xlsx', res)
    },

    async getDeviceExcel () {
      const res = await deviceExcel()
      downLoads('批量导入设备模板.xlsx', res)
    },
    async batchMatchingLicensePlateTemplate () {
      const res = await batchMatchingLicensePlateTemplate()
      downLoads('批量匹配车牌.xlsx', res)
    },
    async putInStorageTemplate () {
      const res = await putInStorageTemplate()
      downLoads('入库车辆.xlsx', res)
    },
    // 骑手模板
    async riderTemplate () {
      const res = await companiesTemplate()

      downLoads('骑手模板.xlsx', res)
    },
    // 骑手模板
    async storeTemplate () {
      const res = await storeTemplate()

      downLoads('门店模板.xlsx', res)
    },
    // 骑手模板
    async carTemplate () {
      const res = await carTemplate()
      downLoads('车辆模板.xlsx', res)
    },

    // 配件采购单模板
    async _getTemplateDownload () {
      const res = await getTemplateDownload()
      downLoads('配件采购单模板.xlsx', res)
    },
    beforeUpload (file) {
      this.fileList = []
      this.fileList.push(file)
      console.log(file)
    },
    onInitial (type) {
      console.log(type, '???')
      this.step = 1
      this.status = type
      this.fileList = []
      this.confirmLoading = false
      this.show = true
    },
    handleChange () { },
    async onSubmit () {
      if (this.step === 1) {
        if (this.fileList.length === 0) {
          this.$message.newFun('请选择导入文件', 'error', 3)
        } else {
          this.confirmLoading = true
          const formData = new FormData()
          formData.append('file', this.fileList[0])
          console.log(formData, 2323)
          let res
          if (this.status === 1) {
            res = await companiesImportant(formData)
          } else if (this.status === 2) {
            res = await carImportant(formData)
          } else if (this.status === 3) {
            res = await storeImportant(formData)// 门店车辆导入
          } else if (this.status === 4) {
            res = await putInStorageImportant(formData)// 入库车辆导入
          } else if (this.status === 5) {
            res = await batchMatchingImportant(formData)// 批量匹配车牌
          } else if (this.status === 6) {
            res = await importDevice(formData) // 导入设备
          } else if (this.status === 7) {
            res = await importVinNo(formData) // 导入设备
          } else if (this.status === 8) {
            res = await putInAccessoriesPurchaseImportant(formData) // 导入配件采购单
          } else if (this.status === 9) {
            res = await lotCardImportant(formData) // 1.6.4 导入物联网卡
          } else if (this.status === 10) {
            res = await importHardWareDevice(formData) // 1.6.7 硬件设备管理-导入 1.6.7
          } else if (this.status === 11) {
            res = await importDeviceStore(formData) // 1.7.0 设备库-导入
          }
          const { isSuccess, data, msg } = res
          if (isSuccess) {
            if (this.status === 5) {
              this.confirmLoading = false
              if (Object.prototype.toString.call(data) === '[object Null]') {
                this.$message.newFun(msg, 'success', 2)

                this.$emit('getList')
                this.show = false
              } else {
                this.$message.newFun('已导入', 'success', 2)
                this.step = 2
                this.message = data
              }
            } else if (this.status === 7) {
              this.confirmLoading = false
              this.$emit('getList', data)
              this.$message.newFun(`验证成功${data.availableList.length}条`, 'success', 2)

              this.show = false
            } else if (this.status === 11) {
              console.log('res', res.data)
              const loadingHide = this.$message.loading('正在导入文件，请耐心等待，过程可能需要几分钟', 0)
              setTimeout(() => {
                getOffline({ id: res.data }).then(r => {
                  loadingHide()
                  // 1：生成中；2：生成成功; 3: 解析异常 - 全部失败
                  if (r.data?.status === 1) {
                    this.confirmLoading = false
                    this.show = false
                    this.deviceStoreErrText = '数据导入结果获取超时'
                    this.deviceStoreShow = true
                  } else if (r.data?.status === 2) {
                    this.$emit('getList')
                    this.confirmLoading = false
                    this.$message.newFun('导入成功', 'success', 2)
                    this.show = false
                  } else if (r.data?.status === 3) {
                    this.confirmLoading = false
                    this.show = false
                    this.deviceStoreErrText = '部分文件导入失败'
                    this.deviceStoreShow = true
                  } else {
                    this.$message.newFun(r.msg || '数据导入失败', 'error', 2)
                  }
                })
              }, 10000)
            } else {
              this.$emit('getList')
              this.confirmLoading = false
              this.$message.newFun('导入成功', 'success', 2)

              this.show = false
            }
          } else {
            if (this.status === 8) {
              this.$emit('anewImport', msg)
            } else {
              this.confirmLoading = false
              var index = msg.indexOf(':')
              this.$message.newFun(msg.substring(index + 1, msg.length), 'error', 2)
            }
          }
        }
      } else {
        this.step = 1
      }
    },
    cancel () {
      this.show = false
    },
    toOfflineData () {
      this.deviceStoreShow = false
      this.$router.push('/data/data/offlineData')
    }
  }
}
</script>

<style lang="less">
.titleI {
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #606266;
  line-height: 20px;
}

.ant-upload.ant-upload-drag .ant-upload {
  padding: 27px 0;
}

.contentss {
  height: 20px;
  font-size: 14px !important;
  font-weight: 400;
  text-align: center;
  color: #606266 !important;
  line-height: 20px;
}

.xu_border {
  width: 360px;
  text-align: center;
  height: 150px;
  background: #ffffff;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;

  img {
    width: 38px;
    height: 40px;
    margin-top: 20px;
  }

  .name {
    height: 17px;
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    line-height: 17px;
    margin: 8px 0 12px;
  }
}

.device-store-dialog {
  .t1 {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #333333;
    line-height: 25px;
  }

  .t2 {
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
    color: #606266;
    line-height: 20px;
  }
}
</style>
